import React, { Fragment, useEffect, useState } from 'react'
import { Modal, Input, Button } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import MyCard from '@/components/MyCard'
import { Row } from 'antd'
import styles from './modal.less'
import { addAdsItem } from '@/api/ads'
import { connect } from 'umi'

type Props = {
    visible: boolean,
    setVisible: Function,
    init: Function
}

export interface IObjs {
    index: number,
    val: string,
    imageUrl: string
}

function MyModal({ visible, setVisible, init }: Props) {
    const [list, setList] = useState<any>([])
    const [name, setName] = useState("")
    const addItem = () => {
        const NewList = JSON.parse(JSON.stringify(list))
        NewList.push({
            // 图片
            img: "",
            url: "",
            key: String(Math.random()).slice(2, 8)
        })
        setList(NewList)
    }
    // 取消
    const cancel = () => {
        setVisible(false)
        setList([])
    }
    const ok = async () => {
        await addAdsItem({
            name,
            items: list
        })
        setVisible(false)
        await init()
    }

    // 接收子组件内容
    const accept = (obj: IObjs) => {
        const newList = list
        newList[obj.index].url = obj.val
        newList[obj.index].img = obj.imageUrl
        setList(newList)
    }

    const acceptList = (index: number) => {
        let newList = JSON.parse(JSON.stringify(list))
        newList.splice(index, 1)
        
        setList(newList)
    }

    useEffect(() => {
        console.log(list)
    }, [list])
    return (
        <Fragment>
            <Modal
                title="添加广告位"
                visible={visible}
                onOk={ok}
                onCancel={cancel}
                width={1000}
            >
                <div className={styles.flex}>
                    <span>广告位名称:</span>
                    <div>
                        <Input value={name} onChange={(ev) => {
                            setName(ev.target.value)
                        }} />
                    </div>
                </div>

                <Button className="mt15" 
                        type="primary"
                        onClick={addItem}
                        icon={<PlusOutlined />}>
                    添加广告位
                </Button>

                <Row gutter={20} className='mt15'>
                    {
                        list.map((item: any, index: number) => {
                            return <MyCard  acceptList = { acceptList } 
                                            acceptItem = { accept } 
                                            index={index} 
                                            key={item.key} />
                        })
                    }
                </Row>
            </Modal>
        </Fragment>
    )
}

const mapStateToProps = (state: any) => {
    return {
        
    }
}

const mapDispatchToProps = (dispatch: Function) => {
    return {
        init() {
            dispatch({ type: "ads/init" })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyModal)